
.tree {
  --trunk-color: linear-gradient(to bottom,goldenrod, rgb(124, 72, 4));
  /* --trunk-color: goldenrod; */
  --root-color: rgb(124, 72, 4);
  --leaf-color: green;
  --leaf-fall-color: goldenrod;
  display: flex;
  flex-flow: row nowrap;
  height: 500px;
  width: 500px;
  margin: 100px calc(50% - 250px);
  position: relative;
}
.Trunk {
  --trunk-bottom: 0;
  --trunk-height: 0;
  --trunk-times: 5;
  --trunk-rotate: 3;
  z-index: 2;
  flex: 0 0 auto;
  position: relative;
  height: calc(var(--trunk-height) * 10 * var(--trunk-times) * 1px);
  max-height: 50%;
  width: calc(var(--trunk-height) * var(--trunk-times) * 1px);
  max-width: var(--trunk-maxWidth);
  background-image: var(--trunk-color);
  /* background-image: linear-gradient(to bottom,var(--trunk-color), var(--root-color)); */
  /* background-color: var(--trunk-color); */
  transform: rotate(calc(var(--trunk-rotate) * 1deg - 90deg));
  transform-origin: bottom center;
  position: absolute;
  bottom: calc(var(--trunk-bottom) * 1px);
  left: max(calc(50% - var(--trunk-height) * var(--trunk-times) / 2 * 1px), (calc(50% - var(--trunk-maxWidth) / 2)));
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  transition: height calc(var(--grow-times) * 0.001s), width calc(var(--grow-times) * 0.001s);
}
.Trunk.root {
  /* bottom: 0; */
  z-index: 1;
  transform: rotate(calc(var(--trunk-rotate) * 1deg - 10deg));
}

.Trunk > .Leaf {
  --leaf-height: 0;
  --leaf-times: 3px;
  --leaf-rotate: 3;
  z-index: 2;
  position: absolute;
  height: calc(var(--leaf-height) * 10 * var(--leaf-times));
  width: var(--leaf-times);
  background-color: var(--leaf-color);
  transform: rotate(calc(var(--leaf-rotate) * 1deg - 45deg));
  transform-origin: bottom center;
  position: absolute;
  top: calc(var(--leaf-height) * -10 * var(--leaf-times));
  left: 50%;
  animation: shake .2s infinite linear;
}

@keyframes shake {
  0% {
    transform: rotate(calc(var(--leaf-rotate) * 1deg - 44deg));
  }
  100% {
    transform: rotate(calc(var(--leaf-rotate) * 1deg - 46deg));
  }
}

.Trunk > .Leaf.falling {
  background-color: var(--leaf-fall-color);
  opacity: 0;
  transition: all 2s;
}

.tree > .Root {
  --root-height: 10;
  --root-width: 20;
  --root-radius: 50;
  --root-times: 3px;
  z-index: 1;
  flex: 0 0 auto;
  height: calc(var(--root-height) * var(--root-times));
  width: calc(var(--root-width) * var(--root-times));
  max-width: 100%;
  border-top: 20px solid var(--root-color);
  position: absolute;
  bottom: calc(var(--root-height) * -1 * var(--root-times));
  transform-origin: top center;
  transition: 
    height calc(var(--grow-times) * 0.001s),
    width calc(var(--grow-times) * 0.0005s),
    left calc(var(--grow-times) * 0.0005s),
    right calc(var(--grow-times) * 0.0005s);
}
.tree > .Root.left {
  /* position: relative; */
  border-top-left-radius: calc(50% + 1% * var(--root-radius));
  left: Clamp(-50%, 50% - var(--root-width) * var(--root-times), 50%);
  /* left: calc(50% - var(--root-width) * var(--root-times)); */
}
/* .tree > .Root.left.first::after {
  content: '';
  display: inline-block;
  height: 100%;
  border-top: 20px solid var(--root-color);
  border-top-right-radius: calc(50% + 1% * var(--root-radius));
  width: 20px;
  position: absolute;
  right: -20px;
  top: -20px;
} */
.tree > .Root.right {
  border-top-right-radius: calc(50% + 1% * var(--root-radius));
  left: 49.5%;
}
/* .tree > .Root.right.first::before {
  content: '';
  display: inline-block;
  height: 100%;
  border-top: 20px solid var(--root-color);
  border-top-left-radius: calc(50% + 1% * var(--root-radius));
  width: 20px;
  position: absolute;
  left: -20px;
  top: -20px;
} */